<!-- 品质信息项 -->
<script lang="jsx" setup>
import dayjs from 'dayjs';
import { isEmpty } from 'lodash-es';
import { Empty } from 'ant-design-vue';

const simpleImage = Empty.PRESENTED_IMAGE_DEFAULT;

defineProps({
  list: {
    type: Array,
    default: () => [
      {
        key: 'moduleNo',
        title: '生产型号'
      },
      {
        key: 'lotId',
        title: '生产批次'
      },
      {
        key: 'serialNum',
        title: '单号'
      },

      {
        key: 'quantity',
        title: '检验数量(PNL)'
      },
      {
        key: 'result',
        title: '判断结果'
      },
      {
        key: 'ngNum',
        title: '不良数'
      },
      {
        key: 'ngRatio',
        title: '不良率'
      },
      {
        key: 'shiftType',
        title: '班别'
      },
      {
        key: 'operator',
        title: '检验人'
      },
      {
        key: 'modifyTime',
        title: '检验时间'
      }
    ]
  },
  title: {
    type: String,
    default: ''
  },
  columnFileName: {
    type: String,
    default: ''
  }
});

const data = defineModel('data', { type: Object, default: () => ({}) });

function isTime(key) {
  if (key.includes('Time') || key.includes('time') || key.includes('Date') || key.includes('date')) {
    return true;
  }
}

defineEmits(['showDetail']);
</script>

<template>
  <ACard size="small">
    <template #title>
      <div class="card-title">{{ title }}</div>
    </template>
    <template #extra>
      <span class="cursor-pointer color-#646cff" @click="$emit('showDetail', columnFileName)">查看详情</span>
    </template>
    <div class="card-body">
      <template v-if="!isEmpty(data)">
        <div v-for="item in list" :key="item.key" class="info-item">
          <div class="label">{{ item.title }}</div>
          <!-- <div class="value">{{ item.customRender ? item.customRender(data) : data[item.key] }}</div> -->
          <div class="value">
            <template v-if="isTime(item.key)">
              {{ data[item.key] && dayjs(data[item.key]).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-else>
              <template v-if="item.key == 'shiftType'">
                {{ ['白班', '夜班'][data[item.key]] || '' }}
              </template>
              <template v-else>
                {{ data[item.key] }}
              </template>
            </template>
          </div>
        </div>
      </template>
      <div v-else class="no-data h-full w-full flex-center">
        <AEmpty :image="simpleImage" description="暂无检验数据" />
      </div>
    </div>
  </ACard>
</template>

<style lang="scss" scoped>
.card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  height: 168px;
  .info-item {
    width: calc(50% - 10px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13px;
    flex-grow: 1;
    .label {
      color: #aeaeae;
      font-weight: bold;

      &::after {
        content: ':';
        margin: 0 3px;
      }
    }
    .value {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

.card-title {
  display: flex;
  align-items: center;
  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #646cff;
    margin-right: 5px;
  }
}
</style>
